// 项目的JS打包入口文件

// !注意:这里大家导入的Vue和网页中，直接用script导入的Vue，不一样！
import Vue from 'vue'; // ?这种方式默认导入的是vue.runtime.common.js文件，他不提供如下这种导入方式
// import Vue from '../node_modules/vue/dist/vue.js'// ?提供如下这种导入方式,我们也可以在vue的pakeage-json中修改mian:指定对外暴露的js文件,还可以在webpack.config.js中配置rosovle:{alias{'vue$':'vue/dist/vue.js'}}

// !默认使用 import 导入的 Vue，不支持如下方式取定义组件，只支持 使用 .vue 模板文件来定义组件
// ?官方不推荐我们在 webpack 构建的Vue项目中使用如下方式定义组件，因为这样不优雅，更主要的是：没有把 组件化的思想发挥到极致！
/* const login = {
  template: '<h3 style="">这是Login组件</h3>',
  data(){
    return {}
  },
  methods:{},
  filters:{}
} */

// !导入自己的 .vue 组件
// ?在这里，如果要在webpack中使用.vue组件，必须先安装对应的loader加载器，否则webpack处理不了这种文件
// ?vue-loader  命令:cnpm i vue-loader -D
import app from './components/App.vue';
// ?还需要安装vue-template-compiler模板编译器；
// ?命令:cnpm i vue-template-compiler -D

// !导入路由模块:命令:cnpm i vue-router -S
import VueRouter from 'vue-router';
// ?安装:
Vue.use(VueRouter);

// !MintUI1:全局安装 mint-ui //?MintUI适用于开发手机端项目，是饿了么公司开发的,命令cnpm i mint-ui -S;Element 用于开发PC端项目
import MintUI from 'mint-ui';
// ?MintUI2:导入Mint-UI 的样式
import 'mint-ui/lib/style.css';
// ?MintUI3:使用Vue.use来批量注册MintUI的组件
Vue.use(MintUI);
// ?MintUI4:使用下面代码按需注册需要用到的组件
// import { Header } from 'mint-ui';
// Vue.component(Header.name, Header);

// !Bootstrap1：导入Bootstrap样式
// import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
// ?Bootstrap2:导入自己用到的全局样式，以进行对第三方模块样式的修改
// import './css/global.css';

// !MUI1:导入MUI的样式表
import '../lib/mui/css/mui.min.css';
// ?MUI2:导入MUI的扩展图标,购物车图标在icons-extra.css中
import '../lib/mui/css/icons-extra.css';

// !导入路由模块
import router from './router';

// !导入axios发送ajax请求,命令:cnpm i axios -S
import axios from 'axios';
// ?补充axios的用法：这种方式将axios挂载到Vue.prototype.$http上和vue-resourse的用法一样，但是axios相比于vue-resourse来说不能发起jsonp请求
// Vue.prototype.$http = axios;
// ?补充.then()和async、await的区别：.then(function name(params) {调用方法返回promise时调用.then内部的方法，相当于回调函数})
// async异步修饰符,用于修饰方法;await等待修饰符，等待发起请求的方法
// ?使用axios的create方法，设置默认地址
Vue.prototype.$http = axios.create({
	baseURL: 'http://127.0.0.1:3080' //在全局设置axios的请求根路径，这样在发起请求的时候就可以不写根地址了
});
const vm = new Vue({
	el: '#app',
	render: (c) => c(app), // 记住： 使用 render 函数渲染出来的组件，叫做 根组件；将来，其它的组件，只能在 app 组件的内部去渲染；
	router
});
